<template>
    <div class="page order-detail-view">
        <wv-header title="订单详情" fixed>
            <div class="btn-back" slot="left">
                <i class="iconfont iot-back" @click="$router.go(-1)"></i>
            </div>
            <div class="btn-back" slot="right">
                <i class="iconfont iot-refresh" style="font-size: 22px;" @click="refreshDetail"></i>
            </div>
        </wv-header>

        <div class="main-header-fixed">
            <div class="empty" v-if="isEmpty" @click="getOrder">
                <i class="iconfont iot-empty"></i>
                <p v-if="!loading">订单信息获取失败，点击重试</p>
            </div>

            <div v-else class="order-info">
                <wv-preview
                        :title="'订单编号：' + order.order_sn"
                        :value="order.status_text"
                        :dataItems="order.items">
                </wv-preview>
            </div>
        </div>

        <div class="order-stop-btn">
            <wv-button type="warn" :is-loading="stopBtnLoading" v-if="order.status == 'service'" @click="stopOrder">停止充电</wv-button>
        </div>
    </div>
</template>

<script>
    import util from '@/libs/util';

    export default {
        data () {
            return {
                isEmpty: true,
                loading: false,
                stopBtnLoading: false,
                order: {},
            }
        },

        mounted () {
            const orderSn = this.$route.query.orderSn;
            this.getOrder(orderSn, (order) => {
                this.formatOrder(order);
                this.orderStatusListener(orderSn);
            });
        },

        watch: {
            $route: function (to) {
                if (to.name == 'order-detail') {
                    const orderSn = to.query.orderSn;
                    this.getOrder(orderSn, (order) => {
                        this.formatOrder(order);
                        this.orderStatusListener(orderSn);
                    });
                }
            }
        },

        methods: {
            refreshDetail () {
                this.getOrder(this.order.order_sn, (order) => {
                    this.formatOrder(order);
                });
            },

            formatOrder (order) {
                let data = {
                    order_sn: order.order_sn,
                    status_text: order.status_text,
                    status: order.status,
                    items: [
                        { label: '设备编号', value: order.device_sn },
                        { label: '插口位置', value: '插口' + order.port.substr(1) },
                        { label: '设备位置', value: order.device_address },
                        { label: '下单时间', value: order.created_at },
                    ]
                };

                console.log(order);

                if (order.status == 'success') {
                    data.items.push({
                        label: '开始时间',
                        value: order.service_start_at
                    });

                    data.items.push({
                        label: '结束时间',
                        value: order.service_end_at
                    });

                    data.items.push({
                        label: '充电时长',
                        value: order.consume_duration + '分钟'
                    });

                    data.items.push({
                        label: '订单金额',
                        value: order.order_money + '元'
                    });

                    data.items.push({
                        label: '支付时间',
                        value: order.paid_at
                    })
                }

                this.order = data;
            },

            getOrder (order_sn, callback) {
                this.$root.loading('加载中');
                this.loading = true;
                util.api().get(`/api/orders/${order_sn}`).then((resp) => {
                    if (resp.data.status == true) {
                        callback(resp.data.data);
                        this.isEmpty = false;
                    } else {
                        this.$root.error(resp.data.message);
                        this.isEmpty = true;
                    }
                    this.$root.closeLoading();
                    this.loading = false;
                }).catch((e) => {
                    this.loading = false;
                    this.$root.closeLoading();
                    util.handleApiException(e, this, '获取订单详情失败');
                });
            },

            stopOrder () {
                this.$root.loading('停止中');
                this.loading = true;
                util.api().get(`/api/orders/stop/${this.order.order_sn}`).then((resp) => {
                    if (resp.data.status == true) {
                        this.stopBtnLoading = true;
                        this.$root.success('请求已发送，处理中...');
                    } else {
                        this.$root.error(resp.data.message);
                    }
                    this.$root.closeLoading();
                }).catch((e) => {
                    this.$root.closeLoading();
                    util.handleApiException(e, this, '停止充电失败');
                });
            },

            orderStatusListener(orderSn) {
                Echo.channel(`webapp-order-change.${orderSn}`).listen('WebAppOrderChange', (e) => {
                    if (e.order.status == 'service') {
                        this.$root.toast('充电开始');
                    } else if (e.order.status == 'success') {
                        this.$root.toast('充电完成，交易结束');
                    }
                    this.formatOrder(e.order);
                });
            }
        }
    }
</script>